<template>
  <div class="wrap">
    <div id="mynetwork" class="mynetwork"></div>
  </div>
</template>

<script>
const vis = require("vis-network/dist/vis-network.min.js");
var network = null;
export default {
  name: 'visNetwork',
  props: {
    msg: String
  },
  mounted() {
        this.init();
    },
    methods: {
      init() {
          // 节点
          var nodes = new vis.DataSet([
              { id: 1, label: "Node 1", title: "1111" },
              { id: 2, label: "Node 2" },
              { id: 3, label: "Node 3" },
              { id: 4, label: "Node 4" },
              { id: 5, label: "Node 5" },
          ]);

          //  边
          var edges = new vis.DataSet([
              { id: 1, from: 1, to: 3 },
              { id: 2, from: 1, to: 3 },
              { id: 5, from: 3, to: 1 },
              { from: 1, to: 2 },
              { from: 2, to: 4 },
              { from: 2, to: 5 },
              { from: 3, to: 3 },
          ]);

          // create a network
          var container = document.getElementById("mynetwork");
          var data = {
              nodes: nodes,
              edges: edges,
          };
          var options = {};
          network = new vis.Network(container, data, options);
          nodes.add({ id: 6, label: "Node 6" });
          network.on("click", function(e) {
              console.log(e);
              edges.add({ from: 3, to: 2 });
          });
      },
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.wrap{
   width:100%;
  height:100%
}
.mynetwork{
  width:100%;
  height:100%
}
</style>
